<template>
	<view class="container">
		<view class="haibao">
			<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill"></image>
		</view>
		<view class="box">
			<view class="title">
				柠檬乌龙茶
			</view>
			<view class="fl_al dandu">
				<view class="name">
					温度
				</view>
				<view class="sonlist fl_al">
					<view class="son">
						正常冰
					</view>
					<view class="son">
						正常冰
					</view>
				</view>
			</view>
			<view class="fl_al dandu">
				<view class="name">
					温度
				</view>
				<view class="sonlist fl_al">
					<view class="son">
						正常冰
					</view>
					<view class="son">
						正常冰
					</view>
				</view>
			</view>
			<view class="kuang2" style="margin-top: 22rpx;">
				<view class="xqname">
					商品详情
				</view>
				<view class="xq">
					鲜柠配乌龙，柠檬茶新宠主辅料:柠檬片、兰香乌龙茶汤
					【杯型容量:大杯:杯容量660mL】【杯型容量】即杯容积，非实际含量。为避免过满无法封杯或撒漏，可能存在不完全满杯情况，克重为预估出餐量参考数据，实际含量请以门店出餐为准。
					注:杯型容量数据基于相关国家标准存在合理偏差
				</view>
			</view>
		</view>
		<view class="btns" style="border-top: 1px solid #707070;padding-top: 20rpx;">
			<view class="fl_ju">
				<text>￥5</text>
				<u-number-box v-model="value">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
					<text slot="input" style="width: 50px;text-align: center;" class="input">{{value}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
			</view>
			<view class="kouwei">
				正常冰/正常糖
			</view>
			<u-divider ></u-divider>
			<view class="fl_ju">
				<view class="btn">
					<u-button text="立即购买" shape="circle"
						:customStyle='{backgroundColor: "#fff",border:"1px solid #000000"}'></u-button>
				</view>
				<view class="btn">
					<u-button text="加入购物车" shape="circle" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1
			};
		},
		computed: {

		},
		onShow() {

		},
		onLoad() {

		},
		methods: {

		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.haibao {
		width: 100%;
		height: 486rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		position: absolute;
		top: 400rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 100rpx;
		z-index: 999;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		padding: 32rpx;
		box-sizing: border-box;
		color: #333333;

		.title {
			font-size: 38rpx;
			margin-bottom: 71rpx;
		}

		.name {
			font-size: 30rpx;
			margin-right: 32rpx;
		}

		.son {
			background-color: #F6F6F6;
			border-radius: 25rpx;
			padding: 6rpx 29rpx;
			box-sizing: border-box;
			color: #3F4041;
			font-size: 26rpx;
			margin-right: 12rpx;
		}

		.dandu {
			margin-bottom: 30rpx;
		}
	}

	.xqname {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 35rpx;
	}

	.xq {
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.btns {
		background-color: #fff;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.btn {
		width: 300rpx;
	}

	.kouwei {
		color: #AAAAAA;
		font-size: 30rpx;
		margin: 10rpx 0;
	}

	.custom-style {
		border: 1px solid #000;

	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #3AA3FF;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>